<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>添加处方药品</title>
    <script src="../../js/vue.js"></script>
    <script src="../../js/axios.min.js"></script>
    <script src="../../layuiadmin/layui/layui.js"></script>
    <link rel="stylesheet" href="../../layuiadmin/layui/css/layui.css" media="all">
    <style>
        th {
            text-align: center !important;
        }
    </style>
</head>
<body>
<div id="app">

    <div style="text-align: center">
        <div class="layui-card">
            <div class="layui-card-body">
                <label for="sarchMedi2" class="layui-form-label">查找药品</label>
                <div class="layui-input-block">
                    <input id="sarchMedi2" style="width: 50%;float: left" type="text" name="title" required
                           lay-verify="required" placeholder="搜索药品" autocomplete="off"
                           class="layui-input">
                    <button class="layui-btn layui-btn-normal">查询</button>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-container" style="margin-top: 50px">
        <div class="layui-row">
            <div class="layui-col-md6">
                <div>
                    <div class="layui-card">
                        <div class="layui-card-body">
                            <div v-if="mediItemList.length">
                                <table class="layui-table" style="text-align: center">
                                    <colgroup>
                                        <col width="150">
                                        <col>
                                    </colgroup>
                                    <thead>
                                    <tr>
                                        <th>名称</th>
                                        <th>数量</th>
                                        <th>小计</th>
                                        <th>操作</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr v-for="(item,index) in mediItemList">
                                        <td>{{item.mediName}}</td>
                                        <td style="text-align: center">
                                            <button style="width: 30px" @click="subCount(index)"
                                                    v-bind:disabled="item.amount<=1">-
                                            </button>
                                            {{item.amount}}
                                            <button style="width: 30px" @click="addCount(index)">+</button>
                                        </td>
                                        <td>{{item.mediItemSubtotal}}</td>
                                        <td>
                                            <button class="layui-btn layui-btn-danger" @click="removeMediItem(index)">移除
                                            </button>
                                        </td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                            <div v-else>
                                <h1>请选择药品</h1>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-col-md6">

                <div>
                    <div class="layui-card">
                        <div class="layui-card-body">
                            <table class="layui-table" style="text-align: center">
                                <colgroup>
                                    <col width="150">
                                    <col width="200">
                                    <col>
                                </colgroup>
                                <thead>
                                <tr>
                                    <th>名称</th>
                                    <th>规格</th>
                                    <th>价格</th>
                                    <th colspan="1">操作</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr v-for="(item,index) in list">
                                    <td>{{item.mediName}}</td>
                                    <td>{{item.mediStand}}</td>
                                    <td>{{item.mediPrice}}</td>
                                    <td>
                                        <button @click.once="addToMediItemList(index)"
                                                class="layui-btn">添加
                                        </button>
                                    </td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div style="padding-left: 200px;padding-right: 200px">
        <blockquote class="layui-elem-quote">患者姓名：王五</blockquote>
        <blockquote class="layui-elem-quote">科室：住院部</blockquote>
        <blockquote class="layui-elem-quote">总价格：￥{{totalPrice}}.00</blockquote>
        <blockquote class="layui-elem-quote">医生：王医生</blockquote>
    </div>
    <div style="text-align: center">
        <a href="#" class="layui-btn" @click="addRecipeMedi">确认</a>
    </div>
</div>
<script>

    var app = new Vue({
        el: "#app",
        data: {
            list: [],
            mediItemList: [],
            param: {
                id: '',
                amount: ''
            },
            sourceId: ''
        },
        created() {
            //生命周期函数，已初始化就调用加载数据方法
            this.getData();
            this.sourceId = this.getUrlKey("inpatientId");
        }, computed: {
            totalPrice() {
                let totalPrice = 0;
                for (let i = 0; i < this.mediItemList.length; i++) {
                    totalPrice += this.mediItemList[i].mediItemSubtotal * this.mediItemList[i].amount;
                }
                return totalPrice;
            }
        },
        methods: {
            addToMediItemList: function (index) {
                let medi = this.list[index];
                let mediId = medi.mediId;
                let mediName = medi.mediName;
                let mediItemSubtotal = medi.mediPrice;
                let mediItemStatus = false;
                this.mediItemList.push({
                    'mediItemId': '',
                    'mediId': mediId,
                    'mediName': mediName,
                    'amount': 1,
                    'mediItemSubtotal': mediItemSubtotal
                })
            },
            removeMediItem: function (index) {
                if (confirm("是否删除？")) {
                    this.mediItemList.splice(index, 1);
                    this.list = this.getData();
                }
            },
            addCount: function (index) {
                this.mediItemList[index].amount++
            },
            subCount: function (index) {
                this.mediItemList[index].amount--
            },
            getData: function () {
                var that = this;
                axios.get("http://localhost:8080/mediList").then(function (resp) {
                    that.list = resp.data;
                });
            },
            //封装数据
            loadData: function () {
                let recipeMedi = {};

            },
            addRecipeMedi: function () {
                if (this.mediItemList.length === 0) {
                    alert("请至少选择一个药品")
                } else {
                    //封装数据
                    let params = '';
                    for (let i = 0; i < this.mediItemList.length; i++) {
                        if (this.mediItemList.length !== i) {
                            params += 'id=' + this.mediItemList[i].mediId + '&amount=' + this.mediItemList[i].amount + '&';
                        } else {
                            params += 'id=' + this.mediItemList[i].mediId + '&amount=' + this.mediItemList[i].amount + '&';
                        }
                    }
                    params += "&sourceId=" + this.sourceId;
                    params += '&recipeMediId=' + this.generateUUID();
                    console.log(params);
                    //发送请求控制器
                    var that = this;
                    //跨域后session不一致需要：{withCredentials : true}
                    axios.get("http://localhost:8080/recipeMedi/addRecipeMedi?" + params, {withCredentials: true}).then(function (resp) {
                        if (resp.data.state === 200) {
                            //todo 保存在session当中recipeMediSession，此时保存成功，返回医嘱界面,但是门诊与住院不同，或者根据sourceId的开头返回不同的页面
                            if (that.sourceId.startsWith('in')) {
                            location.href = "docAdvice.html?inpatientId=" + that.sourceId+"&recipeMediId="+resp.data.data;
                            } else {
                                alert("跳转到门诊的指定页面")
                            }
                        } else {
                            alert("添加失败")
                        }
                    });
                }
            },
            generateUUID: function () {
                var d = new Date().getTime();
                if (window.performance && typeof window.performance.now === "function") {
                    d += performance.now(); //use high-precision timer if available
                }
                var uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
                    var r = (d + Math.random() * 16) % 16 | 0;
                    d = Math.floor(d / 16);
                    return (c == 'x' ? r : (r & 0x3 | 0x8)).toString(16);
                });
                uuid = uuid.replace(/\-/g, '');
                return uuid;
            },
            //获取url的指定名字的参数
            getUrlKey: function (name) {
                //构造一个含有目标参数的正则表达式对象
                var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
                //匹配目标参数
                var r = window.location.search.substr(1).match(reg);
                //返回参数
                if (r != null) {
                    return unescape(r[2]);
                } else {
                    return null;
                }
            }
        }
    })
</script>
</body>
</html>